<template>
  <div id="supplier-center">
    <c-title :hide="false" text="信息管理"></c-title>
    <div class="info-box" v-if="apply_info_set == '0'">
      <h1>基本信息</h1>
      <section>
        <van-field label="真实姓名" placeholder="请输入真实姓名" v-model="information.my_name" center clearable />
        <van-field label="手机号码" placeholder="请输入手机号码" v-model="information.phone_number" center clearable />
      </section>
      <h1>店铺信息</h1>
      <section class="store">
        <van-field label="店铺名称" placeholder="请输入店铺姓名" v-model="information.store_name" center clearable
          label-width="5.25rem" />
        <div class="logo">
          <span class="logo-label">店铺logo</span>
          <div style="text-align: center;">
            <van-uploader :after-read="onRead">
              <div :class="imageUrl ? 'imageUrl-1' : 'imageUrl-upload'">
                <img :src="imageUrl ? imageUrl : require('../../../assets/images/up_icon.png')" style="width: 100%;"
                  class="avatar" />
              </div>
            </van-uploader>
          </div>
        </div>
        <div style="
            background: white;
            padding-bottom: 10px;
            box-sizing: border-box;
            border-bottom: solid 0.0625rem #ebebeb;">
          <div class="licence-box" v-if="information.imageList && information.imageList.length > 0">
            <span class="licence">营业执照</span>
            <div class="license_img">
              <template v-for="(item, index) in information.imageList">
                <img :src="item" alt="" class="img_box" :key="index" />
              </template>
            </div>
          </div>
          <div class="industry" style="border-bottom: 1px solid #F0F0F1;">
            <span class="text-label">供应商分组</span><span style="font-size: 0.8125rem;">{{ information.group }}</span>
          </div>
          <div class="industry">
            <span class="text-label">行业</span><span style="font-size: 0.8125rem;">{{ information.category }}</span>
          </div>
        </div>
      </section>
      <h1 v-if="fill_set">收款信息</h1>
      <section>
        <van-field v-if="fill_set.company_bank == 1" type="number" label="银行卡账号" placeholder="请输入银行账号"
          v-model.trim="information.bank_account" center clearable label-width="5.25rem" />
        <van-field v-if="fill_set.bank_username == 1" label="开户人姓名" placeholder="请输入开户人姓名"
          v-model.trim="information.owner_name" center clearable label-width="5.25rem" />
        <van-field v-if="fill_set.bank_of_accounts == 1" label="开户银行" placeholder="请输入开户银行"
          v-model.trim="information.opening_bank" center clearable label-width="5.25rem" />
        <van-field v-if="fill_set.opening_branch == 1" label="开户支行" placeholder="请输入开户支行"
          v-model.trim="information.opening_branch" center clearable label-width="5.25rem" />

        <van-field v-if="fill_set.company_ali == 1" label="企业支付宝账号" placeholder="请输入企业支付宝账号"
          v-model.trim="information.enterprise_alipay" center clearable label-width="5.25rem" />
        <van-field v-if="fill_set.company_ali_username == 1" label="企业支付宝用户名" placeholder="请输入企业支付宝用户名"
          v-model.trim="information.enterprise_alipay_user" center clearable label-width="5.25rem" />
        <van-field v-if="fill_set.ali == 1" label="支付宝账号" placeholder="请输入支付宝账号" v-model.trim="information.alipay"
          center clearable label-width="5.25rem" />

        <van-field v-if="fill_set.ali_username == 1" label="支付宝用户名" placeholder="请输入支付宝用户名"
          v-model.trim="information.alipay_username" center clearable label-width="5.25rem" />

        <van-field v-if="fill_set.wechat == 1" label="微信账号" placeholder="请输入微信账号"
          v-model.trim="information.weChat_account" center clearable label-width="5.25rem" />
      </section>

      <div class="btn">
        <button type="buttom" @click="modifyInformation">确认修改</button>
      </div>
    </div>
    <div v-else class="info-box">
      <template v-for="parent_item in apply_info">
        <div v-if="parent_item.show && parent_item.key == 'base'">
          <h1>{{ parent_item.title }}</h1>
          <section>
            <template v-for="item in parent_item.info">
              <div class="item-upload" style="background-color:#fff;padding: 0.75rem;"
                v-if="item.type == 'img' && item.show">
                <div class="title" :class="{ 'required': item.must }">营业执照</div>
                <div class="img_uploader">
                  <div class="photoBox" v-if="apply_info_form.license_img">
                    <img :src="apply_info_form.license_img" style="width: 100%;" />
                    <i @click="apply_info_form.license_img = ''"></i>
                  </div>
                  <van-uploader v-else :after-read="upload_license" :max-count="1">
                    <van-icon name="plus" />
                  </van-uploader>
                </div>
              </div>
              <van-field
                  v-else-if="item.type == 'select' && item.show"
                  is-link
                  :label="item.show_title" 
                  input-align="right"
                   :required="item.must">
                <template #input>
                      <div  @click="popup_handle(item.key)"  style="color:#646566" >{{ show_select_value(item)}}</div>
                </template>
              </van-field>
              <template v-else-if="item.type == 'address_select' && item.show">
                <van-field
                  is-link
                  :label="item.show_title" 
                  input-align="right"
                   :required="item.must"
                >
                  <template #input>
                        <div  @click="popup_handle(item.key)">{{ fullAddress }}</div>
                  </template>
                </van-field>
                <van-field
                  v-if="fullAddress && item.is_street"
                  is-link
                  :label="item.show_title" input-align="right" :required="item.must"
                >
                  <template #input>
                        <div  @click="popup_handle('stree')">{{ street_name }}</div>
                  </template>
                </van-field>
              </template>
              <van-field v-else-if="item.type == 'date_range' && item.show" name="date_range" :label="item.show_title"
                input-align="right" :required="item.must">
                <template #input>
                  <div style="display: flex;align-items: center;">
                    <span class="date-range" :class="{ 'c-969799': !apply_info_form.license_date_start }"
                      @click="date_handle('start','date_range')">{{ apply_info_form.license_date_start || '请选择开始时间' }}</span>
                      <template v-if="apply_info_form.license_valid_type==0">
                        <span class="date-range-line"></span>
                        <span class="date-range" :class="{ 'c-969799': !apply_info_form.license_date_end }"
                      @click="date_handle('end','date_range')">{{ apply_info_form.license_date_end || '请选择结束时间' }}</span>
                        </template>
                    </div>
                </template>
              </van-field>
              <van-field v-else-if="item.type == 'textarea' && item.show" v-model="apply_info_form[item.key]"
                type="textarea" name="textarea" :label="item.show_title" input-align="right" :required="item.must">
              </van-field>
              <van-field
                v-else-if="(item.type == 'text' || item.type == 'account' || item.type == 'password') && item.show"
                v-model="apply_info_form[item.key]" :label="item.show_title" input-align="right" :required="item.must"
                :placeholder="'请输入' + item.show_title" />
            </template>
          </section>
        </div>
        <div v-if="parent_item.show && parent_item.key == 'legal_person'">
          <h1>{{ parent_item.title }}</h1>
          <section>
            <template v-for="item in parent_item.info">
              <template v-if="item.type == 'id_card_img' && item.show">
                <div class="item-upload" style="background-color:#fff;padding: 0.75rem;">
                  <div class="title" :class="{ 'required': item.must }">{{ item.show_title + '正面图片(人像面)' }}</div>
                  <div class="img_uploader">
                    <div class="photoBox" v-if="apply_info_form.legal_img_front">
                      <img :src="apply_info_form.legal_img_front" style="width: 100%;" />
                      <i @click="apply_info_form.legal_img_front = ''"></i>
                    </div>
                    <van-uploader v-else :after-read="upload_legal_front" :max-count="1">
                      <van-icon name="plus" />
                    </van-uploader>
                  </div>
                </div>
                <div class="item-upload" style="background-color:#fff;padding: 0.75rem;">
                  <div class="title" :class="{ 'required': item.must }">{{ item.show_title + '反面图片(国徽面)' }}</div>
                  <div class="img_uploader">
                    <div class="photoBox" v-if="apply_info_form.legal_img_back">
                      <img :src="apply_info_form.legal_img_back" style="width: 100%;" />
                      <i @click="apply_info_form.legal_img_back = ''"></i>
                    </div>
                    <van-uploader v-else :after-read="upload_card" :max-count="1">
                      <van-icon name="plus" />
                    </van-uploader>
                  </div>
                </div>
              </template>
              <van-field v-else-if="item.type == 'date_range' && item.show" name="date_range" :label="item.show_title"
                input-align="right" :required="item.must">
                <template #input>
                  <div style="display: flex;align-items: center;">
                    <span class="date-range" :class="{ 'c-969799': !apply_info_form.legal_date_start }"
                      @click="date_handle('start','legal_person')">{{ apply_info_form.legal_date_start || '请选择开始时间' }}</span>
                    <template v-if="apply_info_form.legal_valid_type==0">
                      <span class="date-range-line"></span>
                      <span class="date-range" :class="{ 'c-969799': !apply_info_form.legal_date_end }"
                      @click="date_handle('end','legal_person')">{{ apply_info_form.legal_date_end || '请选择结束时间' }}</span>
                    </template>
                    </div>
                </template>
              </van-field>
              <van-field
                  v-else-if="item.type == 'select' && item.show"
                  is-link
                  :label="item.show_title" 
                  input-align="right"
                   :required="item.must"
                >
                <template #input>
                      <div  @click="popup_handle(item.key)"  style="color:#646566" >{{ show_select_value(item)}}</div>
                </template>
              </van-field>
              <van-field
                v-else-if="item.type=='text'&&item.show"
                v-model="apply_info_form[item.key]"
                :label="item.show_title"
                input-align="right"
                :required="item.must"
                :placeholder="'请输入'+item.show_title">
              </van-field>
            </template>
          </section>
        </div>
        <div v-if="parent_item.show && parent_item.key == 'account'">
          <h1>{{ parent_item.title }}</h1>
          <section>
            <template v-for="item in parent_item.info">
              <template v-if="item.type == 'bank_info' && item.show">
                <van-field
                    :is-link="info.bank_info_edit==0"
                    label="银行卡类型" 
                    input-align="right"
                    :required="item.must"
                  >
                  <template #input>
                        <div  @click="popup_handle(item.key)"  style="color:#646566" >{{ show_select_value(item)}}</div>
                  </template>
                </van-field>
                <van-field v-for="(c_item, i) in bank_info" :key="i" :readonly="info.bank_info_edit==1" v-model="apply_info_form[c_item.key]"
                  :label="c_item.title" input-align="right" :required="item.must" :placeholder="'请输入' + c_item.title" />
                <div class="item-upload" style="background-color:#fff;padding: 0.75rem;"
                  v-if="apply_info_form.bank_type === 2">
                  <div class="title" :class="{ 'required': item.must }">开户许可证</div>
                  <div class="img_uploader">
                    <div class="photoBox" v-if="apply_info_form.opening_permit">
                      <img :src="apply_info_form.opening_permit" style="width: 100%;" />
                      <i v-if="info.bank_info_edit==0" @click="apply_info_form.opening_permit = ''"></i>
                    </div>
                    <van-uploader v-else :after-read="upload_permit" :max-count="1">
                      <van-icon name="plus" />
                    </van-uploader>
                  </div>
                </div>
              </template>
              <div class="bank-img" v-if="item.type == 'bank_img' && item.show">
                <div :class="item.must?'required':''">{{ item.show_title }}</div>
                <div class="bank-img-item">
                  <div>银行卡正面</div>
                  <div class="img_uploader">
                    <div class="photoBox" v-if="apply_info_form.bank_img_front">
                      <img :src="apply_info_form.bank_img_front" style="width: 100%;" />
                      <i v-if="info.bank_info_edit==0" @click="apply_info_form.bank_img_front = ''"></i>
                    </div>
                    <van-uploader v-else :after-read="upload_bank_front">
                      <van-icon name="plus" />
                    </van-uploader>
                  </div>
                </div>
                <div class="bank-img-item">
                  <div>银行卡反面</div>
                  <div class="img_uploader">
                    <div class="photoBox" v-if="apply_info_form.bank_img_back">
                      <img :src="apply_info_form.bank_img_back" style="width: 100%;" />
                      <i  v-if="info.bank_info_edit==0"  @click="apply_info_form.bank_img_back = ''"></i>
                    </div>
                    <van-uploader v-else :after-read="upload_bank_black">
                      <van-icon name="plus" />
                    </van-uploader>
                  </div>
                </div>
              </div>
              <van-field v-else-if="item.type == 'text' && item.show" v-model="apply_info_form[item.key]" :readonly="info.bank_info_edit==1"
                :label="item.show_title" input-align="right" :required="item.must" :placeholder="'请输入' + item.show_title">
              </van-field>
            </template>
          </section>

        </div>
        <div v-if="parent_item.show && parent_item.key == 'store'">
          <h1>{{ parent_item.title }}</h1>
          <section>
            <template v-for="item in parent_item.info">
              <van-field v-if="item.show  && item.type == 'supplier_category_select'||item.type=='supplier_group_select' "
                :value="item.type == 'supplier_category_select'?info.has_one_category&&info.has_one_category.title:info.has_one_group&&info.has_one_group&&info.has_one_group.title"
                :label="item.show_title"
                readonly
                title-style="text-align:left" input-align="right">
              </van-field>
              <van-field v-else-if="item.type == 'text' && item.show" v-model="apply_info_form[item.key]"
                :label="item.show_title" input-align="right" :required="item.must" :placeholder="'请输入' + item.show_title">
              </van-field>
            </template>
          </section>
        </div>
      </template>
      <div class="btn">
        <button type="buttom" @click="form_handle">确认修改</button>
      </div>
    </div>

      <van-popup v-model="showLicense" position="bottom" round>
        <div style="display: flex;align-items: baseline;justify-content: space-between;padding: .625rem .75rem 1.5rem;">
          <span @click="showLicense=false">取消</span>
          <span>商户类型</span>
          <span @click="showLicense=false">确认</span>
        </div>
        <van-radio-group v-model="apply_info_form.license_type">
          <van-cell-group>
            <van-cell v-for="item in license_type" :key="item.id" :title="item.name" clickable @click="license_handle(item.id)">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
      <van-popup v-model="show_license_valid_type" position="bottom" round  >
        <div style="display: flex;align-items: baseline;justify-content: space-between;padding: .625rem .75rem 1.5rem;">
          <span @click="show_license_valid_type=false">取消</span>
          <span>有效期类型</span>
          <span @click="show_license_valid_type=false">确认</span>
        </div>
        <van-radio-group v-model="apply_info_form[valid_key=='license_valid_type'?'license_valid_type':'legal_valid_type']">
          <van-cell-group>
            <van-cell v-for="item in license_valid_type" :key="item.id" :title="item.name" clickable @click="license_handle(item.id,'valid')">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
  
      <van-popup v-model="show_bank" position="bottom" round  >
        <div style="display: flex;align-items: baseline;justify-content: space-between;padding: .625rem .75rem 1.5rem;">
          <span @click="show_bank=false">取消</span>
          <span>银行卡类型</span>
          <span @click="show_bank=false">确认</span>
        </div>
        <van-radio-group v-model="apply_info_form.bank_type">
          <van-cell-group>
            <van-cell title="请选择银行卡类型" clickable title-style="text-align:left;" @click="license_handle('','void')">
            </van-cell>
            <van-cell  title="对私" clickable title-style="text-align:left;" @click="license_handle(1,'valid')">
              <template #right-icon>
                <van-radio :name="1" />
              </template>
            </van-cell>            
            <van-cell  title="对公" clickable title-style="text-align:left;" @click="license_handle(2,'valid')">
              <template #right-icon>
                <van-radio :name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
      <van-popup v-model="pickerShow" position="bottom">
        <van-datetime-picker type="date" title="选择年月日" :min-date='startDate'	:max-date="endDate"	v-model="pickerValue" @cancel="pickerShow = false" @confirm="setDate" />
      </van-popup>
      <yd-cityselect v-model="showCity1" :callback="setCity1" :items="district"></yd-cityselect>

      <!-- 街道选择 -->
      <van-popup v-model="streetShow" position="bottom" :overlay="true">
        <van-picker
          title="选择街道"
          show-toolbar
          value-key="areaname"
          :columns="districtVal"
          @confirm="streetConfirm"
          @cancel="onCancel"
        />
      </van-popup>
  </div>
</template>
<script>
import info_manage_controller from "./info_manage_controller";
export default info_manage_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-cell--required::before {
  left: 5px;
}

.date-range-line{
  position: relative;
  width: .6875rem;
  height: 1px;
  margin: 0 .625rem;
  &::after{
    content: "";
    left: 0;
    right: 0;
    height: 1px;
    background-color: #101010;
    position: absolute;
  }
}
.date-range{
  text-align: center;
  color: #101010;
  background-color:#FAFAFA;
  height: 1.9375rem;
  padding: 0 .1563rem;
  line-height: 1.9375rem;
  font-size:0.7rem;
  border-radius: .1875rem;
}
.list-item {
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.bank-img {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: .75rem;
  align-items: flex-start;

  .bank-img-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1rem;

    div {
      line-height: 1;
      font-weight: bold;
    }
  }

  .img_uploader {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .photoBox {
      position: relative;
      width: 4.5rem;
      height: 4.5rem;
      border: 1px dashed #c0ccda;
      margin-right: 0.2rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;

      div {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }

      i {
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: url("../../../assets/images/close_iocn.png");
        background-size: 100%;
      }
    }

    .van-uploader {
      width: 4.5rem;
      height: 4.5rem;
      overflow: hidden;
      background: #fff;
      margin-left: 0.2rem;
      margin-right: 0.875rem;
      margin-bottom: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #757575;

      .van-icon {
        font-size: 24px;
        line-height: 4.5rem;
        color: #666;
      }
    }

    .avatar {
      width: 11.125rem;
      height: 11.125rem;
      display: block;
    }
  }
}

.required {
  position: relative;

  &::before {
    position: absolute;
    left: -8px;
    color: #ee0a24;
    font-size: 14px;
    content: '*';
  }
}

.item-upload {
  text-align: left;
  padding-top: 0.875rem;

  .data-text {
    .van-cell {
      min-height: 50px;
      padding: 0 12px;
      color: #555;
    }
  }

  .img_uploader {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .photoBox {
      position: relative;
      width: 4.5rem;
      height: 4.5rem;
      border: 1px dashed #c0ccda;
      margin-right: 0.2rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;

      div {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }

      i {
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: url("../../../assets/images/close_iocn.png");
        background-size: 100%;
      }
    }

    .van-uploader {
      width: 4.5rem;
      height: 4.5rem;
      overflow: hidden;
      background: #fff;
      margin-left: 0.2rem;
      margin-right: 0.875rem;
      margin-bottom: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #757575;

      .van-icon {
        font-size: 24px;
        line-height: 4.5rem;
        color: #666;
      }
    }

    .avatar {
      width: 11.125rem;
      height: 11.125rem;
      display: block;
    }
  }
}

::v-deep .store .van-cell {
  padding: 1.0313rem 1.0625rem !important;
}

::v-deep .van-field__value {
  font-size: 0.8125rem;
}

.imageUrl-upload {
  padding: 1rem;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border: 1px dotted #AAAAB3;
  border-radius: 0.5rem;
}

.imageUrl-1 {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 0 auto;
  // border: 1px dotted #AAAAB3;
}

// setting sun
section {
  margin: 0 0.75rem;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0.5rem;
}

.avatar {
  width: 100%;
  height: 100%;
}

#supplier-center {
  text-align: left;

  .info-box {
    h1 {
      color: #00001C;
      padding: 0.9375rem 0.75rem;
      font-size: 0.9375rem;
      font-weight: bold;
      text-align: left;
    }

    ul {
      h1 {
        line-height: 2.25rem;
        color: #888;
        padding: 0 0.875rem;
        font-size: 16px;
        text-align: left;
      }

      li {
        background-color: #fff;
        line-height: 2.75rem;
        font-size: 14px;
        text-align: left;
        padding: 0 1.25rem;
        border-bottom: solid 0.0625rem #ebebeb;
        display: flex;

        input {
          border: none;
          flex: 1;
        }

        i {
          font-size: 1.5rem;
          color: #c9c9c9;
          line-height: 3.75rem;
        }
      }

      #logo {
        line-height: 3.75rem;
        height: 3.75rem;
        position: relative;
        justify-content: space-between;

        span {
          line-height: 2.75rem;
        }

        .spare {
          position: absolute;
          right: 2.75rem;
          top: 0.375rem;
          width: 3rem;
          height: 3rem;
          border: 0.0625rem dashed #ccc;
          background-color: #fafafa;
          border-radius: 0.1875rem;
          margin: 0 auto;
          display: flex;

          i {
            font-size: 1.5rem;
            margin: 0 auto;
            line-height: 3rem;
            color: #ccc;
          }
        }
      }
    }

    .btn {
      margin: 1.25rem 0;
      padding: 0 0.875rem 1.2813rem;
      font-size: 16px;

      button {
        color: #fff;
        border: none;
        width: 100%;
        height: 2.5rem;
        background: #F15353;
        border-radius: 1.875rem;
      }
    }
  }

  .van-cell {
    padding: 1.0313rem 0.75rem;
    font-size: 16px;

    ::v-deep input::placeholder {
      color: #555;
    }

    ::v-deep .van-field__label {
      white-space: wrap;
      color: #00001C;
      // width: 8.1em;
      font-size: 0.875rem;
      font-weight: normal;
    }
  }

  .license_img {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .logo-label {
    font-size: 0.875rem;
    font-weight: normal;
    color: #00001C;
    margin-right: 2.125rem;
  }

  .logo {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1.0313rem 0;
    border-bottom: 1px solid #F0F0F1;
    margin: 0 1.0625rem;
  }

  .text-label {
    width: 4.375rem;
    margin-right: 1.2813rem;
    text-align: left;
    font-size: 0.875rem;
  }

  .industry {
    font-size: 16px;
    height: 2.6563rem;
    line-height: 2.6563rem;
    display: flex;
    margin: 0 1.0625rem;
  }

  .licence {
    margin: 20px 2rem 20px 0;
    display: block;
    flex-shrink: 0;
  }

  .licence-box {
    display: flex;
    border-bottom: 1px solid #F0F0F1;
    margin: 10px;
    font-size: 0.875rem;
    color: #00001C;
  }

  .group {
    font-size: 16px;
    margin: 10px 0 0 10px;
    display: block;
  }

  .img_box {
    width: 6.1875rem;
    margin-bottom: 10px;
    border: 1px dotted #AAAAB3;
    border-radius: 0.5rem;
  }
}
</style>
